<template>
  <div class="tide_level">
    <div class="tide_level_top">
      <div class="tide_level_top_text">潮位信息</div>
    </div>
    <div class="tide_level_middle">
      <div class="time_frame">
        <div
          class="data time"
          @click="changeTime('日')"
          :class="timeType == '日' ? 'timeActive' : ''"
        >
          日
        </div>
        /
        <div
          class="month time"
          @click="changeTime('月')"
          :class="timeType == '月' ? 'timeActive' : ''"
        >
          月
        </div>
        /
        <div
          class="year time"
          @click="changeTime('年')"
          :class="timeType == '年' ? 'timeActive' : ''"
        >
          年
        </div>
      </div>
      <div class="tide_table">
        <div class="datalist">
          <div class="dataheader">
            <div
              class="headerlist"
              v-for="(item, index) in datalist.headerData"
              :key="index"
            >
              <span>
                {{ item }}
              </span>
            </div>
          </div>
          <div class="databoxs">
            <div
              v-for="(item, index) in datalist.data"
              :key="index"
              class="databox"
            >
              <div class="name">
                <span>
                  {{ item.name }}
                </span>
              </div>
              <div class="chaowei">
                <span>
                  {{ item.chaowei }}
                </span>
              </div>
              <div class="jingjie">
                <span>
                  {{ item.jingjie }}
                </span>
              </div>
              <div class="baozheng">
                <span>
                  {{ item.baozheng }}
                </span>
              </div>
              <div class="zhangluo">
                <span
                  :style="{
                    color:
                      item.zhangluo > 0
                        ? 'red'
                        : item.zhangluo < 0
                        ? 'green'
                        : '#fff',
                  }"
                >
                  {{ item.zhangluo | ZhangluoType() }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="tide_level_bottom">
      <div id="qstViews"  style="width:450px;height:300px; margin-left: 0px"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      datalist: {
        headerData: ["站名", "潮位(m)", "警戒(m)", "保证(m)", "涨落"],
        data: [
          {
            name: "长坑水库",
            chaowei: -2.98,
            jingjie: 5.5,
            baozheng: 6.4,
            zhangluo: -10,
          },
          {
            name: "长坑水库",
            chaowei: -2.98,
            jingjie: 5.5,
            baozheng: 6.4,
            zhangluo: 10,
          },
          {
            name: "长坑水库",
            chaowei: -2.98,
            jingjie: 5.5,
            baozheng: 6.4,
            zhangluo: -10,
          },
          {
            name: "长坑水库",
            chaowei: -2.98,
            jingjie: 5.5,
            baozheng: 6.4,
            zhangluo: -20,
          },
          {
            name: "长坑水库",
            chaowei: -2.98,
            jingjie: 5.5,
            baozheng: 6.4,
            zhangluo: -15,
          },
          {
            name: "长坑水库",
            chaowei: -2.98,
            jingjie: 5.5,
            baozheng: 6.4,
            zhangluo: 20,
          },
          {
            name: "长坑水库",
            chaowei: -2.98,
            jingjie: 5.5,
            baozheng: 6.4,
            zhangluo: 30,
          },
          {
            name: "长坑水库",
            chaowei: -2.98,
            jingjie: 5.5,
            baozheng: 6.4,
            zhangluo: 0,
          },
        ],
      },
      timeType: "日",

      // echarts
      option: {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          itemHeight: 10,
          itemWidth: 10,
          icon: "circle", // 修改形状
          itemGap: 15, // 修改间距
          top: 20,
          textStyle: {
            //图例文字的样式
            color: "rgba(255,255,255,0.8)",
            fontSize: 12,
          },
          data: ["最高高潮位", "最低低潮位", "平均潮位"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "10%",

          containLabel: true,
        },
        xAxis: {
          type: "category",
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,0.8)",
            },
          },
          axisTick: {
            //x轴刻度线
            show: false,
          },
          data: ["6点", "7点", "8点", "9点", "10点", "11点", "12点", "13点"],
        },
        yAxis: {
          type: "value",
          max: 400,
          min: 0,
          splitNumber: 5,

          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,0.8)",
            },
          },

          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "rgba(255,255,255,0.1)",
              // color:rgba(255,255,255,.5)
            },
          },
        },
        series: [
          {
            name: "最高高潮位",
            smooth: true,
            type: "line",
            symbol: "none", //这句就是去掉点的
            color:"#2276FC",
            data: [248, 258, 300, 210, 310, 200, 100, 150],
          },
          {
            name: "最低低潮位",
            type: "line",
            smooth: true,
            symbol: "none", //这句就是去掉点的
            color:"#5FD5EC",
            data: [110, 110, 150, 50, 200, 300, 40, 61],
          },
          {
            name: "平均潮位",
            smooth: true,
            type: "line",
            symbol: "none", //这句就是去掉点的
            color:"#FFCF5F",
            data: [60, 180, 50, 210, 100, 310, 150, 250],
          },
        ],
      },
    };
  },
  filters: {
    ZhangluoType(val) {
      if (val > 0) {
        return "↑";
      } else if (val < 0) {
        return "↓";
      } else {
        return "-";
      }
    },
  },
  mounted() {
      this.getEcharts()
  },
  methods: {
    // 改变年/月/日
    changeTime(val) {
      this.timeType = val;
    },

    // 初始化echarts
    getEcharts() {
      let myChart = echarts.init(document.getElementById("qstViews"));
      myChart.setOption(this.option);
    },
  },
};
</script>

<style lang="scss" scoped>
.tide_level {
  .tide_level_top {
    background: url("../../../../../../assets/images/home/top.png");
    background-size: cover;
    .tide_level_top_text {
      padding-left: 16px;
      font-family: OPPOSans;
      font-style: normal;
      font-weight: normal;
      font-size: 18px;
      line-height: 24px;
      /* identical to box height */
      color: #ffffff;
    }
  }
  .tide_level_middle {
    display: flex;
    flex-direction: column;
    .time_frame {
      display: flex;
      justify-content: flex-end;
      .time {
        font-family: OPPOSans;
        font-style: normal;
        font-weight: normal;
        font-size: 14px;
        line-height: 18px;
        letter-spacing: 0.6px;
        color: #e8effb;
        cursor: pointer;
      }
      .data {
        padding-right: 12px;
      }
      .month {
        padding: 0 12px;
      }
      .year {
        padding-left: 12px;
      }

      .timeActive {
        color: #4d9cf6;
      }
    }
    .tide_table {
      margin-left: 15px;
      margin-top: 10px;
      .datalist {
        .dataheader {
          width: 100%;
          height: 40px;
          background: rgba(1, 211, 248, 0.19);
          display: flex;
          justify-content: space-around;
          align-items: center;
          font-size: 12px;
          color: rgba(255, 255, 255, 0.651);
          position: relative;
          &::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 2px;
            bottom: -4px;
            background: rgba(1, 211, 248, 0.19);
          }
          .headerlist {
            width: 19.5%;
            text-align: center;
          }
        }
        .databoxs {
          // display: flex;
          overflow: auto;
          height: 420px;
          width: 100%;
          margin: 5px 0;
          > .databox:nth-of-type(odd) {
            > div {
              background: rgba(255, 255, 255, 0.05);
            }
          }
          .databox {
            width: 100%;
            text-align: center;
            display: flex;
            justify-content: space-around;
            align-items: center;
            .zhangluo {
              span {
                color: #ffffff;
              }
            }

            > div {
              width: 19.5%;
              height: 50px;
              display: flex;
              justify-content: center;
              align-items: center;
              background: rgba(17, 38, 80, 0.3);
              margin: 5px 0px;
            }
          }
        }
      }
    }
  }
  .tide_level_bottom{
      margin-left: 15px;
  }
}
</style>